import 'package:flutter/material.dart';

///https://www.jianshu.com/p/310cfd23ba3a
//CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：
//
// SliverList：类似于我们之前使用过的ListView；
// SliverFixedExtentList：类似于SliverList，只是可以设置滚动的高度；
// SliverGrid：类似于我们之前使用过的GridView；
// SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；
// SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView；
// SliverSafeArea：设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）
class SliverWidgetPage extends StatefulWidget {
  @override
  _SliverWidgetPageState createState() => new _SliverWidgetPageState();
}

// class _SliverWidgetPageState extends State<SliverWidgetPage> {
//   @override
//   Widget build(BuildContext context) {
//     return new Scaffold(
//       appBar: new AppBar(
//         title: new Text('SliverWidgetPage'),
//       ),
//       body: CustomScrollView(
//         slivers: [
//                    SliverSafeArea(
//                      sliver: SliverGrid(
//                       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//                           crossAxisCount: 2,
//                           crossAxisSpacing: 8,
//                           mainAxisSpacing: 8),
//                       delegate: SliverChildBuilderDelegate(
//                           (BuildContext ctx, int index) {
//                         return Container(
//                           alignment: Alignment(0, 0),
//                           color: Colors.orange,
//                           child: Text('item$index'),
//                         );
//                       }),
//                   ),
//                    )
//         ],
//       ),
//     );
//   }
// }
class _SliverWidgetPageState extends State<SliverWidgetPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: CustomScrollView(
        slivers: [
            SliverAppBar(
              pinned: true,
              expandedHeight: 250,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('测试'),
                background: Image(
                  image: NetworkImage(
                      "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          SliverPadding(
            padding: EdgeInsets.all(10),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 10,
                  crossAxisSpacing: 10,
                  childAspectRatio: 4),
              delegate:
                  SliverChildBuilderDelegate((BuildContext ctx, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.cyan[100 * (index % 9)],
                  child: Text("index$index"),
                );
              }, childCount: 20),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.all(5),
            sliver: SliverFixedExtentList(
                delegate:
                    SliverChildBuilderDelegate((BuildContext ctx, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('list item $index'),
                  );
                }, childCount: 20),
                itemExtent: 50),
          )
        ],
      ),
    );
  }
}
